import React from 'react';
import PropTypes from 'prop-types';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';
import warnIcon from '../../../assets/images/station/warn.png';

class StaionNoMatchModal extends BaseComponent {
  static propTypes = {
    goOnFunc: PropTypes.func.isRequired,
    reChooseFunc: PropTypes.func.isRequired,
  }

  state = {
    show: false,
    station: null,
  }

  show = (station) => {
    this.setState({ show: true, station });
  }

  close = () => {
    this.setState({ show: false });
  }


  render() {
    const { show, station } = this.state;
    if (!show) {
      return null;
    }

    const { goOnFunc, reChooseFunc } = this.props;

    return (
      <Modal className="station-no-match-modal">
        <div className="content">
          <div className="station-row">
            <img src={station.getLogo()} alt="" className="logo" />
            <div className="station">{station.get('name')}</div>
          </div>
          <img alt="" className="icon" src={warnIcon} />
          <div className="text">油站位置可能与当前定位不匹配</div>
          <div className="btn-row">
            <div className="go-on" onClick={() => goOnFunc(station)}><div>继续支付</div></div>
            <div className="re-choose" onClick={reChooseFunc}><div>重新选站</div></div>
          </div>
        </div>
      </Modal>
    );
  }
}

export default StaionNoMatchModal;

